<template>
	<div>
		<div>
			<div class="btndel">
				<div class="flex_f flex_row">
					<a-input-number v-model="banji" label="请输入班级"></a-input-number>
					<a-select a-select default-value="SZ" placeholder="请选择科目" @change="didianChange">
						<a-select-option v-for="item in optionsDidian" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
					</a-select>

					<a-select default-value="web前端" @change="kemuChange">
						<a-select-option v-for="item in box" :key="item.value" :value="item.value">
							{{item.label}}
						</a-select-option>
					</a-select>
					<a-button icon="fa fa-plus" type="primary" disabled>最高薪资:{{topSalary}}元</a-button>
					<a-button icon="fa fa-plus" type="primary" disabled>平均薪资:{{avgSalary}}元</a-button>
					<a-button icon="fa fa-plus" type="primary" disabled>找到工作人数:{{pagination.total}}人</a-button>
				</div>
			</div>

			<!-- 表格主内容 length-->
			<a-table size="small" :loading="loading" :columns="columns" :data-source="pageResult" row-key="studentID" :pagination="pagination">
				<!-- <span slot="title" style="color: red">NAME</span> -->
				<span slot="studentEducation" slot-scope="row">
					<a-tag :color="row === '本科' ? 'green' : row == '专科' ? 'red' : row == '高中'?'yellow': 'blue'">{{ row }}</a-tag>
				</span>
			</a-table>
		</div>
	</div>
</template>

<script lang="ts">
	import {Component,Prop,Vue,Watch} from "vue-property-decorator";
	import axios from "ts-axios-new";
	import 'ant-design-vue/lib/tag/style/index.css';
	import 'ant-design-vue/lib/select/style/index.css';
	import 'ant-design-vue/lib/table/style/index.css';
	import 'ant-design-vue/lib/input/style/index.css';
	import 'ant-design-vue/lib/pagination/style/index.css';
	import 'ant-design-vue/lib/input-number/style/index.css';
	import 'ant-design-vue/lib/button/style/index.css';
	import {Tag,Select,Table,Input,Pagination,InputNumber,Button} from 'ant-design-vue'
	@Component({
		components: {
			  aTag:Tag,
			  aSelect:Select,
			  aTable:Table,
			  aSelectOption:Select.Option,
			  aInput:Input,
			  aPagination:Pagination,
			  aInputNumber:InputNumber,
			  aButton:Button
		},
	})
	export default class tableAXios extends Vue {
		private didianChange(value: any): void {
			this.city = value
		}
		private kemuChange(value: any): void {
			this.kemu = value
		}
		private columns: any[] = [{
				title: "姓名",
				dataIndex: "studentName",
				key: "studentName 1",
			},
			{
				title: "工资",
				align: "center",
				ellipsis: true,
				dataIndex: "salary",
				filtered: true,
				key: "id 7",
				sorter: (a: any, b: any) => a.salary - b.salary,
			},
			{
				title: "公司",
				dataIndex: "company",
				key: "company 2",
				align: "center",
			},
			{
				title: "学历",
				dataIndex: "studentEducation",
				key: "studentEducation",
				align: "center",
				scopedSlots: {
					customRender: "studentEducation",
				},
			},
			{
				title: "福利",
				dataIndex: "welfare",
				key: "welfare 5",
				align: "center",
				ellipsis: true,
			},
			{
				title: "是否应届",
				dataIndex: "studentStatus",
				key: "studentStatus 6",
				ellipsis: true,
				align: "center",
			},
		];
		private pagination: any = {
			pageSize: 5,
					current: 1,
					total:0,
					showSizeChanger: true, // 显示可改变每页数量123
					pageSizeOptions: ["5","10", "20", "50", "100"], // 每页数量选项123
					showTotal: (total:any) => `共${total}条`, // 显示总数
					onShowSizeChange: (current:any, pageSize:any) => this.onShowSizeChange(current, pageSize),
					onChange:this.onPageChange.bind(this), //点击页码事件
					buildOptionrow:(pageSizeOptions:any) => `${pageSizeOptions.value}条/页`,
		};
		private loading: boolean = false;
		private banji: number = 1901; //班级
		private topSalary: any = "0"; //最高薪资
		private avgSalary: any = "0"; //平均薪资
		private pageResult: any = []; //学生所有数据
		private optionsDidian: any = [{
				value: "SZ",
				label: "深圳",
			},
			{
				value: "HZ",
				label: "杭州",
			},
			{
				value: "BJ",
				label: "北京",
			},
		];

		private city: any = "SZ";
		private box: any = [{
				value: "HTML5",
				label: "web前端",
			},
			{
				value: "JAVA",
				label: "JAVA后台",
			},
			{
				value: "BJ",
				label: "UI设计",
			},
			{
				value: "云计算",
				label: "云计算",
			},
		];
		private kemu: any = "HTML5";
		private mounted(): void {
			this.chaxun();
		}
		private chaxun(): void {
			//获取数据
			axios({
				method: "get",
				url: `http://jx.1000phone.net/teacher.php/Api/classJobData?class=${this.city}-${this.kemu}-JY-${this.banji}&tdsourcetag=s_pcqq_aiomsg`,
			}).then((data: any) => {
				this.loading = false;
				this.topSalary = data.data.topSalary; //最高薪资
				this.pagination.total = data.data.student.length; //找到工作人数
				this.avgSalary = data.data.avgSalary; //找平均薪资
				let tiaoshu = this.pagination.current * this.pagination.pageSize - this.pagination.pageSize;
				this.pageResult = data.data.student.splice(tiaoshu, this.pagination.pageSize); //学生所有数据
			});
		}
		private handleAdd(): void {
			//班级加bind
			var timer = undefined;
			clearTimeout(timer); //防抖
			timer = setTimeout(() => {
				this.banji++;
				this.chaxun();
			}, 300);
		}
		private handledel(): void {
			//班级减handleChange
			var timer = undefined;
			clearTimeout(timer); //防抖
			timer = setTimeout(() => {
				this.banji--;
				this.chaxun();
			}, 300);
		}
		private onShowSizeChange(cur:any,val: any): void {
			//条数
			console.log(val,"5656")
			this.pagination.current = 1
			this.pagination.pageSize = val;
			this.chaxun();
		}

		private	onPageChange(page:any):void{
						this.pagination.current = page
						this.chaxun()
					};
		@Watch("city")
		handleWatch(): void {
			if (this.city == "HZ") {
				this.banji = 1801;
				this.kemu = "云计算";
			}
			this.chaxun();

		}
		@Watch("kemu")
		kemuBtn(): void {
			this.chaxun();

		}
		@Watch("banji")
		banjiBtn(): void {
			this.chaxun();

		}
		@Watch("current")
		currentbtn(): void {
			this.chaxun();
		}
	}
</script>

<style lang="less" scoped>
	.flex_f {
		 .flex_row(row);
		margin-bottom: 20px;

		& * {
			flex: 1;
			margin: 0 10px;
		}
	}
</style>
